<template>
	<div class="book">
		<el-row justify="space-between" style="margin-top: 2rem;">
			<el-col :span="10"><h1>商品列表</h1></el-col>
			<el-col :span="3">
				<el-button type="success" @click="$router.push({name:'bookedit'})">添加新的商品</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-table :data="books" style="width: 100%;" :border="true">
				<el-table-column label="编号" prop="id" width="50" align="center"/>
				<el-table-column label="名称" prop="name"/>
				<el-table-column label="作者" prop="author"/>
				<el-table-column label="出处" prop="publisher"/>
				<el-table-column label="日期">
					<template #default="scope">
						{{filterDate(scope.row.tpublish)}}
					</template>
				</el-table-column>
				<el-table-column label="图片" align="center" width="90">
					<template #default="scope">
						<el-avatar shape="square" :size="60"
						:src="`${$ServerUrl}/api/public/showImg/${scope.row.picture}`">
						</el-avatar>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100" align="center">
					<template #default="scope">
						<el-button size="small"
							@click="update(scope.row.id)">修改
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row justify="center">
			<el-col :span="10" style="text-align: center;">
				  <el-pagination background layout="prev, pager, next" 
					  :total="total"
					  :page-size="num"
					  v-model:currentPage="page">
				  </el-pagination>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default{
	name:'Book',
	data(){
		return {
			num:6,//每页数量
			page:1,//当前页码
			total:0,//总页码
			books:[]
		}
	},
	methods:{
		getData(){
			this.axios.get('/api/adm/book/findByPage/'+ (this.page) +'/'+this.num).then((res)=>{
				this.books = res.data.data.books;
				this.total = res.data.data.total;
			}).catch((err)=>{
				//console.log(err);
			});
		},
		update(id){
			this.$router.push({path:'bookedit',query:{bookid:id}});
		}
	},
	created() {
		this.getData();
	},
	watch:{
		page(){
			this.getData();
		}
	},
	computed:{
		filterDate(){
			return (t)=>{
				let now = new Date(t);
				let year = now.getFullYear();
				let month = now.getMonth() + 1;
				let date = now.getDate()
				return `${year}-${month}-${date}`;
			}
		}
	}
}
</script>

<style scoped>
.book{
	width: 96%;
	margin: 0 auto;
}
</style>
